<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" />
<meta name="copyright" content="">
<meta name="author" content="">
<title>国际学校开放日</title>
<!-- <link rel="stylesheet" href="./static/css/style.css"> -->
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=E4805d16520de693a3fe707cdc962045"></script> -->
</head>

<body>
  <div id="app" class="gj-kfr">
    <my-header :type="3">
      <template>
        <div class="ny-banner" :style="'background-image: url(' + banner+')'" v-if="banner"></div>
        <div class="re">
          <div class="top">
            <div class="box">（2023秋季班招生正在进行中，可随时报名咨询，老师会第一时间与您联系。）</div>
          </div>
          <div class="con box flex-bect">
            <div class="left">
              <div class="h2">开放日预约</div>
              <dl class="list">
                <dd v-for="item in nav" :key="item.id" class="item" :class="[item.open ? 'on' : '', item.id === navId ? 'active' : '']" @click="getNavId(item.id)">{{item.name}}</dd>
              </dl>
            </div>
            
            <div class="right" v-if="list">
              <div v-for="(item, i) in list" :key="item.id" class="item flex-bect" :class="[item.end ? 'end' : 'on']">
                <div class="div">
                  <div class="name row1">{{item.name}}</div>
                  <div class="time">
                    时间：{{item.time}}
                    <el-select v-model="item.time" placeholder="请选择" class="select">
                      <el-option v-for="items in options" :key="items.id" :label="items.label" :value="items.label"></el-option>
                    </el-select>
                  </div>
                  <br>
                  <a :href="'./map.html'" class="address cur">[地点：{{item.address}}]</a>
                  <div class="js row1">活动介绍：{{item.js}}</div>
                  
                  <div class="addcity">
                    <div class="city">{{item.city}}</div>
                    <div class="btn">
                      <template v-if="!item.end">免费预约 》</template>
                      <template v-else>已结束</template>
                    </div>
                  </div>
                </div>
                <div class="imgW"><img :src="item.img" alt="" class="img"></div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </my-header>
  </div>
  <script type="text/babel">
    let time = new Date().getTime();
    new Vue({
      el: '#app',
      components: {
        'my-header': httpVueLoader('./components/header.vue?time='+time),
        'gj-how': httpVueLoader('./components/gj_how.vue?time='+time),
        'gj-hownews': httpVueLoader('./components/gj_hownews.vue?time='+time),
        
      },
      data:{
        options: [
          {id:1, label: '2023年08月05日 星期六/半天'},
          {id:2, label: '2023年08月06日 星期日/半天'},
          {id:3, label: '2023年08月07日 星期一/半天'},
          {id:4, label: '2023年08月08日 星期二/半天'},
          {id:5, label: '2023年08月09日 星期三/半天'},
          {id:6, label: '2023年08月01日 星期四/半天'},
          {id:7, label: '2023年08月02日 星期吴/半天'},
          {id:8, label: '2023年08月03日 星期六/半天'},
          {id:9, label: '2023年08月04日 星期六/半天'},
        ],
        nav:null, // 月份
        navId:8,
        list:null,
        banner:"",
        top:'0px'
      },
      mounted() {
        this.getCon();
        // this.map()
        
      },
      
      methods: {
        hoverMap(e){
          // let i = e.target.dataset.i
          // this.top = e.pageY-80+'px'
          // console.log('hoverMap', e.offsetX)
          
        },
        map(){
          var map = new BMapGL.Map("allmap");
          map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);
          map.enableScrollWheelZoom(true);
          map.setHeading(64.5);
          map.setTilt(73);
        },
        getDay(e, i){
          console.log(e, i)
          this.dataChange(e)
        },
        // 获取周几
        dataChange(value){
          var weekday = new Array(7);
          weekday[0] = "周日";
          weekday[1] = "周一";
          weekday[2] = "周二";
          weekday[3] = "周三";
          weekday[4] = "周四";
          weekday[5] = "周五";
          weekday[6] = "周六";
          
          console.log(weekday[value.getDay()], '=---======------')
          
          var shift = new Date(value); //把标准时间转换成正常时间
          this.dayData = shift.getFullYear() + '-' + (shift.getMonth() + 1) + '-' + shift.getDate();	//赋值给日期-传值给后台-因传值需要正常日期
          
          this.week = weekday[value.getDay()]; //周几
          alert(this.dayData)
          alert(this.week)
        },
        // 获取新的月份
        getNavId(e){
          this.navId = e;
          console.log('接口请求数据')
        },
        getCon(){
          this.nav = [
            {id:1, open:false, name:"1月份"},
            {id:2, open:false, name:"2月份"},
            {id:3, open:false, name:"3月份"},
            {id:4, open:false, name:"4月份"},
            {id:5, open:false, name:"5月份"},
            {id:6, open:false, name:"6月份"},
            {id:7, open:false, name:"7月份"},
            {id:8, open:true, name:"8月份"},
            {id:9, open:true, name:"9月份"},
            {id:10, open:true, name:"10月份"},
            {id:11, open:true, name:"11月份"},
            {id:12, open:true, name:"12月份"},
          ];
          const item = { name:" 北京市朝阳区凯文学校开放日预约", address:"北京市朝阳区宝泉三街46号院", js:"各学段从9月16日开始报名，同时将会陆续开展招生说明会，家长们可直接选择合适的时...", city:"北京市朝阳区", img:"./static/image/gj_10_kfr/img.png", end:false, time:"2023年08月05日 星期六/半天"}
          this.list = [
            {id:1, ...item},
            {id:2, ...item, end:true},
            {id:3, ...item},
            {id:4, ...item},
            {id:5, ...item, end:true},
            {id:6, ...item},
            {id:7, ...item},
          ]
          this.banner = './static/image/gj_10_kfr/banner.png';
          
        
        }
      }
    })
  </script>
  <link rel="stylesheet" href="./static/animation/animate.min.css" />
  <script type="text/javascript" src="./static/animation/wow.min.js"></script>
  <script>
      var wow = new WOW({
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: false,
          live: true
      });
      wow.init();
  </script>
  
</body>
</html>